<template>
  <div>
    <!-- <h1>购票</h1> -->
    <!--筛选 -->
    <div class="movie-filtrate">
      <!-- 轮播图 -->
      <div class="swiper-container filtrate-list" id="filtrate">
        <swiper :options="swiperOption" class="swiper-wrapper">
          <swiper-slide
            class="swiper-slide"
            v-for="(fe, fi) in movieBuy"
            :key="fi"
            :class="IndexFiltList == fe.name ? 'active' : ''"
          >
            <!-- @click="filtList(fe.name)" -->
            <span class="swiper-slide-span" @click="filtList(fe.name)">
              {{ fe.name }}</span
            >
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!-- 筛选成功后的数据 -->
      <!-- <comp-cinemas :cinemas="allCinemas"></comp-cinemas> -->
      <!-- <comp-cinemas :cinemas="cinemas"></comp-cinemas> -->
  </div>
</template>
<script>
export default {
  props: ["movieBuy"],
  data() {
    return {
      cinemas: [], //传值
      IndexFiltList: "品牌",
      swiperOption: {
        slidesPerView: 4,
        slidesPerGroup: 4,
        observer: true,
        observeParents: true,
      },
    };
  },
  methods: {
    //  高亮逻辑
    filtList(k) {
      if (this.IndexFiltList == k) {
        this.IndexFiltList = "两次相等";
      } else {
        this.IndexFiltList = k;
      }
    },
  },
  created() {
  },
  mounted() {
   //  setTimeout(() => {
   //    console.log("--allFiltArray--", this.movieBuy);
   //  }, 2000);
  },
};
</script>

<style lang="scss" scoped>
//    <!--筛选 -->
.movie-filtrate {
  width: 100%;
  border-bottom: 1px solid rgb(238, 238, 238);
  position: fixed;
  top: 44px;
  background: #fff;
  z-index: 99;

  .filtrate-list {
    width: 352px;
    margin: 0 auto;
    .swiper-wrapper {
      .swiper-slide {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        .swiper-slide-span {
          font-size: 18px;
        }
      }
    }
  }
}
.active {
  color: #dd403b !important;
}
</style>